<template>
  <div class="employee_search">
    <!-- 员工条件搜索表单 -->
    <el-form :model="employee">
      <el-row class="search_condition_row1">
        <!-- 姓名 -->
        <el-col :span="4">
          <el-input placeholder="请输入姓名" v-model="employee.name" clearable>
            <template slot="prepend">姓名</template>
          </el-input>
        </el-col>
        <!-- 联系电话 -->
        <el-col :span="4" :offset="1">
          <el-input placeholder="请输入联系电话" v-model.number="employee.contactNumber" clearable>
            <template slot="prepend">电话</template>
          </el-input>
        </el-col>
      </el-row>
      <el-row>
        <!-- 创建时间 -->
        <el-col :span="5">
          <el-date-picker
            v-model="employee.createTime"
            align="center"
            type="date"
            placeholder="请选择创建时间"
            :picker-options="pickerOptions"
            value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-col>
        <!-- 地址 -->
        <el-col :span="5">
          <el-cascader
              v-model="addressSelected"
              clearable
              placeholder="请选择地址"
              :options="addressDownBox"
              :props="{ expandTrigger: 'hover' }"
              @change="handleAddressDataChange"
          >
          </el-cascader>
        </el-col>
        <!-- 状态 -->
        <el-col :span="5">
          <el-select clearable placeholder="请选择状态" v-model="employee.state">
              <el-option key="已启用" label="已启用" value="已启用"></el-option>
              <el-option key="已禁用" label="已禁用" value="已禁用"></el-option>
          </el-select>
        </el-col>
        <!-- 搜员工按钮 -->
        <el-col :span="5">
          <el-button type="primary" icon="el-icon-search" @click="searchEmployee">搜索员工</el-button>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
  export default {
    name: 'EmployeeSearch',
    data() {
      return {
        /* 员工信息 */
        employee: {
          name: '',
          state: '',
          createTime: '',
          contactNumber: '',
          address: '',
        },
        /* 日期选择快捷键 */
        pickerOptions: {
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
        /* 选中的地址 */
        addressSelected: '',
        /* 地址下拉框数据 */
        addressDownBox: []
      }
    },
    methods: {
      /* 获得地址下拉框数据 */
      async getAddressData() {
          const { data: res } = await this.$http.get('settings/provinceCity/getAddressData.do')
          if (res.code == '1') {
            this.addressDownBox = res.others
          } else {
              console.log('获取地址下拉框数据失败!')
          }
      },
      /* 搜索员工修改地址事件回调 */
      handleAddressDataChange(value) {
        const address = value[0] + " · " + value[1]
        this.employee.address = address
      },
      /* 搜索员工事件 */
      searchEmployee() {
        this.$bus.$emit('getEmployeePageList',this.employee)
        this.$bus.$emit('getEmployeeTotal')
      }
    },
    created() {
      this.getAddressData()
    }
  }
</script>

<style scoped>
/* 搜索员工表单 */
.el-form {
  padding: 20px 20px;
}
.search_condition_row1 {
  margin-bottom: 15px;
}
.el-input {
  width: 220px;
}
</style>
